<div class="profile">
  <div class="profile-heading">
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-secondary" ng-click="toggleChangePassword()" ng-if="!changePasswordIsActive">{{'CHANGE_PASSWORD' | translate}}</button>
    </div>
    <h1>
      <i class="ion-ios-arrow-thin-left" ng-if="changePasswordIsActive" ng-click="toggleChangePassword()"></i>
      {{'PROFILE_SETTINGS' | translate}}

      <div class="spinner" ng-show="loading">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </h1>

    <hr/>
  </div>

  <div class="profile-inner" ng-class="{'password-active': changePasswordIsActive}">
    <form name="profileForm" class="form-horizontal profile-data-form">

      <div class="form-group" >
        <div class="col-sm-3">
          <label class="control-label">{{'PROFIlE.USERNAME' | translate}}</label>
        </div>
        <div class="col-sm-9">
          <input type="email" class="form-control" disabled ng-model="user.username" placeholder="{{'PROFIlE.USERNAME' | translate}}">
        </div>
      </div>

      <div class="form-group" >
        <div class="col-sm-3">
          <label class="control-label">{{'PROFIlE.FULL_NAME' | translate}}</label>
        </div>
        <div class="col-sm-9">
          <input type="text" class="form-control" ng-model="user.fullName" placeholder="{{'PROFIlE.FULL_NAME' | translate}}">
        </div>
      </div>

      <div class="form-group" >
        <div class="col-sm-3">
          <label class="control-label">{{'PROFIlE.PAUSE_ON_CLICK' | translate}}</label>
        </div>
        <div class="col-sm-9">
          <input type="checkbox" ng-model="user.pauseVideoOnClick">
        </div>
      </div>


      <div class="form-group" ng-show="availableGenres.length">
        <div class="col-sm-3">
          <label class="control-label">{{'PROFIlE.FAVORITE_GENRES' | translate}}</label>
        </div>
        <div class="col-sm-9">
          <ul class="genre-list">
            <li class="genre-tag" ng-class="{'active': isGenreSelected(genre)}" ng-repeat="genre in availableGenres | orderBy:'name'" ng-click="toggleSelectGenre(genre)">
              {{genre.name}}
            </li>
          </ul>
        </div>
      </div>

      <div class="form-group" >
        <div class="col-sm-3">
          <label class="control-label">{{'PROFIlE.AMOUNT_OF_MEDIA_ENTRIES' | translate}}</label>
        </div>
        <div class="col-sm-9">
          <input type="number" class="form-control" ng-model="user.amountOfMediaEntries" placeholder="{{'PROFIlE.AMOUNT_OF_MEDIA_ENTRIES' | translate}}">
        </div>
      </div>

      <hr/>


      <button class="btn btn-success pull-right" ng-show="profileForm.$dirty" ng-click="saveProfile()">{{'PROFIlE.SAVE' | translate}}</button>



    </form>


    <form class="form-horizontal password-form">
      <div class="form-group" >
        <div class="col-sm-3">
          <label class="control-label">{{'PROFIlE.OLD_PASS' | translate}}</label>
        </div>
        <div class="col-sm-9">
          <input type="password" class="form-control" ng-model="passwordData.oldPassword" placeholder="{{'PROFIlE.OLD_PASS' | translate}}">
        </div>
      </div>
      <div class="form-group" ng-class="{'has-success has-feedback': !passwordsInvalid}">
        <div class="col-sm-3">
          <label class="control-label">{{'PROFIlE.NEW_PASS' | translate}}</label>
        </div>
        <div class="col-sm-9">
          <input type="password" class="form-control" ng-model="passwordData.newPassword" placeholder="{{'PROFIlE.NEW_PASS_PLACEHOLDER' | translate}}"
                 ng-change="validatePasswords()">
          <span class="ion-checkmark form-control-feedback" ng-show="!passwordsInvalid" aria-hidden="true"></span>
        </div>
      </div>
      <div class="form-group" ng-class="{'has-success has-feedback': !passwordsInvalid}">
        <div class="col-sm-3">
          <label class="control-label">{{'PROFIlE.REPEAT_PASS' | translate}}</label>
        </div>
        <div class="col-sm-9">
          <input type="password" class="form-control" ng-model="passwordData.repeatPassword" placeholder="{{'PROFIlE.REPEAT_PASS' | translate}}"
                 ng-change="validatePasswords()">
          <span class="ion-checkmark form-control-feedback" ng-show="!passwordsInvalid" aria-hidden="true"></span>
        </div>
      </div>

      <hr/>

      <div class="btn-group pull-right">
        <button type="button" class="btn btn-secondary" ng-disabled="passwordsInvalid" ng-click="saveNewPassword()">
          {{'PROFIlE.SAVE_PASS' | translate}}
        </button>
      </div>
    </form>
  </div>

</div>
